<template>
  <div class="yuanxing">
    <div class="search  border_style bg_style">
      <YsInput class="search-input" clearable v-model.trim="keyword" placeholder="请输入名称或编码">
        <!-- <YsIcon type="icon iconfont icon-sousuo" @click.native="getQueXianLeiXing" :style="{color: inputFocus?'#405680':'rgba(64,86,128,0.6)'}" slot="suffix" /> -->
        <YsIcon type="icon iconfont icon-sousuo" @click.native="getTxFn" slot="suffix" />
      </YsInput>
      <YsButton  class="searchBtn" @click="getTxFn">查询</YsButton>
      <div class="open-btn">
        <YsButton  @click="addTxModal" class="searchBtn right-between">新增</YsButton>
      </div>
    </div>
    <div class="tx-xian  border_style bg_style">
      <drag-zone class="zone2" :options="options">
        <drag-content class="d-vertical c1">
          <div class="item2 i1">
            <top-table ref="topDom" :butFlag="true" :rule_type="'3'" modal_name="条形"></top-table>
          </div>
        </drag-content>
        <drag-handle class="handle"></drag-handle>
        <drag-content class="d-vertical c2">
          <div class="item2 i2">
            <tiao-xing-table></tiao-xing-table>
          </div>
        </drag-content>
      </drag-zone>
    </div>
  </div>
</template>

<script>
import { dragZone, dragHandle, dragContent } from "vue-drag-zone";
import TopTable from "./components/TopTable";
import TiaoXingTable from './components/TiaoXingTable'
export default {
  components: {
    dragZone,
    dragHandle,
    dragContent,
    TopTable,
    TiaoXingTable,
  },
  data() {
    return {
      keyword:"",
      options: {
        direction: "vertical", //横向 horizontal   竖向 vertical
      },
    };
  },
  methods: {
    //搜索
    getTxFn() {
      this.$refs.topDom.getQueXianLeiXing(this.keyword)
    },
    //打开弹出
    addTxModal() {
      this.$refs.topDom.openModal()
    },
  }
};
</script>

<style lang="less" scoped>
// 竖向
.yuanxing {
  height: calc(100% - 20px);
  .zone2 {
    height: 100%;
  }
  .zone2 .d-vertical {
    width: 100%;
    height: 50%;
    overflow: hidden;
  }
  .handle.vertical {
    width: 100%;
    height: 3px;
    cursor: row-resize !important;
    background: rgba(114, 131, 157, 0.33);
  }
  .zone2 .item2 {
    width: 100%;
    height: 100%;
  }
  .zone2 .c1 {
    min-height: 200px;
  }
  .zone2 .c2 {
    min-height: 200px;
  }
  .zone2 .item2.i1 {
    // background: #999;
    overflow: auto;
  }
  .zone2 .item2.i2 {
    // background: #777;
  }
}
/deep/ .hg100 {
  textarea {
    height: 100px;
  }
}

.tx-xian {
  height: calc(100% - 80px);
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  overflow: hidden;
}


.search {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 72px;
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  margin-bottom: 8px;
  .open-btn {
    margin-left: auto;
    button:first-child {
      margin-right: 10px;
    }
    button:last-child {
      margin-left: 10px;
    }
  }
  .search-input {
    height: 40px;
    width: 208px;
    margin-right: 10px;
    border-radius: 4px;
  }
  .search-btn {
    margin-left: auto;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
  margin-right: 0 !important;
}
</style>

